<template>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
      <router-link :to="'/home/newsinfo/' + item.id ">
        <img class="mui-media-object mui-pull-left" :src="item.img_url">
        <div class="mui-media-body">
          <h1>{{item.title}}</h1>
          <p class="mui-ellipsis">
            <span>{{ item.add_time | dateFormat }}</span>
            <span>点击次数：{{item.click}}</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
    data() {
        return {
          newsList: {}
        };
    },
    created() {
        this.getNewsLit();
    },
    methods: {
        getNewsLit() {
            // 獲取新聞列表
            this.$http
                .get("api/getnewslist")
                .then(function(data) {
                    if ( data.body.status === 0 ){
                      this.newsList = data.body.message;
                    }else{
                      Toast('獲取新聞列表');
                    }
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.mui-media-body {
    h1 {
        font-size: 14px;
    }
    p {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
}
</style>

